<template>
	<view class="register-container">
		<view class="verify-text">
			<text>注册居民账号</text>
			<text>欢迎使用家医</text>
		</view>
		<view class="phone">
			<text>手机号码</text>
			<view class="phone-div">
				<view class="input-box">
					<view class="prefix">+86</view>
					<view class="divider"></view>
					<input type="text" v-model="loginInfo.phone" placeholder="请输入手机号码" placeholder-style="color: #ccc; font-size: 28rpx;" />
				</view>
			</view>
		</view>
		<view class="verify">
			<text>验证码</text>
			<view class="verify-div">
				<input type="text" placeholder="请输入验证码" placeholder-style="color: #ccc; font-size: 28rpx;" />
				<text>获取验证码</text>
			</view>
		</view>
		<view class="password">
			<text>密码</text>
			<view class="password-div">
				<input type="text" v-model="loginInfo.password" placeholder="请输入密码" placeholder-style="color: #ccc; font-size: 28rpx;" />
			</view>
		</view>
		<view class="custom-checkbox" @click="toggleAgree">
			<!-- 自定义选框 -->
			<view class="checkbox-box" :style="{ backgroundColor: isAgreed ? '#2984F8' : '#FFF' }">
				<text v-if="isAgreed" class="icon-check">✓</text>
			</view>
			<text>我已阅读并同意</text>
			<text>《用户隐私政策》</text>
		</view>
		<button class="login-btn" @click="register()">立即注册</button>
		<view class="register-buttom">
			<navigator url="/loginPackage/pages/password/password">
				<text>已有账号，去登录</text>
			</navigator>
		</view>
		
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
import { registerApi } from '../../../api/register';
	
	const isAgreed = ref(false);
	
	const toggleAgree = () => {
		isAgreed.value = !isAgreed.value;
	};
	
	//登录信息数据
	const loginInfo = ref({
		phone:'',
		password:''
	})
	
	//注册
	function register(){
		if (!isAgreed.value) {
			uni.showModal({
				title: '提示',
				content: '请先阅读并同意用户隐私政策',
				showCancel: false
			});
			return;
		}
		registerApi({
				...loginInfo.value
			})
			.then(res =>{
				if(res.code == 200){
					wx.showToast({
					  title: '注册成功！',
					  icon: 'success',
					  duration: 2000
					});
			
				}
			})
		
	
	}
</script>

<style lang="scss" scoped>
	.register-container{
		padding: 32rpx 32rpx;
	}
	.verify-text {
		font-size: 48rpx;
		color: #333333;
		display: flex;
		flex-direction: column;
		margin-top: 40rpx;
	
		text:last-child {
			color: #999999;
			font-size: 28rpx;
			margin-top: 10rpx;
			margin-bottom: 80rpx;
		}
	}
	.phone {
		color: #333333;
		font-size: 28rpx;
		font-weight: 500;
	
		.phone-div {
			background-color: #f2f7fb;
			width: 100%;
			height: 88rpx;
			margin-top: 20rpx;
			border-radius: 15rpx;
			display: flex;
			align-items: center;
			// padding: 0 20rpx;
	
			.input-box {
				display: flex;
				align-items: center;
				width: 100%;
				height: 100%;
	
				.prefix {
					color: #999;
					font-size: 28rpx;
					margin-right: 16rpx;
					margin-left: 30rpx;
				}
	
				.divider {
					width: 2rpx;
					height: 36rpx;
					background-color: #ddd;
					margin-right: 16rpx;
				}
	
				input {
					flex: 1;
					height: 100%;
					font-size: 28rpx;
					color: #2984F8;
				}
	
			}
		}
	}
	
	.verify {
		color: #333333;
		font-size: 28rpx;
		font-weight: 500;
		margin-top: 30rpx;
	
		.verify-div {
			background-color: #f2f7fb;
			width: 100%;
			height: 88rpx;
			margin-top: 20rpx;
			border-radius: 15rpx;
			display: flex;
			align-items: center;
	
			input {
				margin-left: 30rpx;
				flex: 1;
				height: 100%;
				font-size: 28rpx;
				color: #2984F8;
			}
	
			text {
				color: #1877f2;
				margin-right: 50rpx;
				font-weight: 400;
			}
		}
	}
	.password{
		color: #333333;
		font-size: 28rpx;
		font-weight: 500;
		margin-top: 30rpx;
	
		.password-div {
			background-color: #f2f7fb;
			width: 100%;
			height: 88rpx;
			margin-top: 20rpx;
			border-radius: 15rpx;
			display: flex;
			align-items: center;
	
			input {
				margin-left: 30rpx;
				flex: 1;
				height: 100%;
				font-size: 28rpx;
				color: #2984F8;
			}	
		}
	}
	.custom-checkbox {
		display: flex;
		align-items: center;
		font-size: 28rpx;
		margin-top: 40rpx;
		color: #ccc;
	
		.checkbox-box {
			width: 30rpx;
			height: 30rpx;
			border: 4rpx solid #ccc;
			border-radius: 6rpx;
			margin-right: 16rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			transition: all 0.3s;
	
			.icon-check {
				color: white;
				font-size: 20rpx;
			}
		}
	
		text:last-child {
			color: #1877f2;
		}
	}
	.login-btn{
		background-color: #2984F8;
		color: #f2f7fb;
		margin-top: 50rpx;
	}
	.register-buttom{
		color: #1877f2;
		text-align: center;
		margin-top: 30rpx;
	}
</style>
